<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<%@include file="../../common/include-header.jsp" %>
<body>

<div class="form-content">
    <form id="form-exam-add" class="form-horizontal">
        <h4 class="form-header h4">基本信息</h4>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>试卷名：</label>
                    <div class="col-sm-8">
                        <input name="name" autocomplete="off" placeholder="请输入试卷名" class="form-control" type="text"
                               required
                               maxlength="30" required>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>题目数量：</label>
                    <div class="col-sm-8">
                        <input name="amount" autocomplete="off" class="form-control" type="number"
                               maxlength="50"
                               placeholder="请输入题目数量" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>持续时间：</label>
                    <div class="col-sm-8">
                        <input name="duration" autocomplete="off" class="form-control" type="number"
                               maxlength="50"
                               placeholder="持续时间(分钟)" required>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>试卷总分：</label>
                    <div class="col-sm-8">
                        <input name="score" autocomplete="off" class="form-control" type="number"
                               maxlength="50"
                               placeholder="请输入试卷总分" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-xs-2 control-label"><span style="color: red; ">*</span>试卷所属科目：</label>
                    <div class="col-xs-4">
                        <select class="form-control select2-hidden-accessible" id="courseId" name="courseId"
                                onchange="$.table.search()">
                            <option value="">请选择</option>

                        </select>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <span class="text-info">   指定试卷的题目</span>
    <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="role-form">
                    <div id="selectedDiv" class="select-list">
                    </div>
                </form>
            </div>

            <div class="btn-group-sm" id="toolbar" role="group">
                <span class="text-info"> 请直接选择需要添加的试题</span>
            </div>

            <div id="showAllQuestion" class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table" data-mobile-responsive="true"></table>
            </div>
        </div>
    </div>
    <%@include file="../../common/include-footer.jsp" %>
    <script>
        $(function () {
            $('#form-exam-add').bootstrapValidator({
                feedbackIcons: {}
                //,live:"disabled"
                , trigger: "blur"
                , fields: {
                    name: {
                        validators: {
                            notEmpty: {message: '试卷名不得为空！'}
                        }
                    },
                    duration: {
                        validators: {
                            notEmpty: {message: '时间不得为空！'}
                        }
                    },
                    score: {
                        validators: {
                            notEmpty: {message: '总分不得为空！'}
                        }
                    },
                    courseId: {
                        validators: {
                            notEmpty: {message: '科目不得为空！'}
                        }
                    },
                    amount: {
                        validators: {
                            notEmpty: {message: '数量不得为空！'}
                        }
                    }
                }
            });

            //异步填充全部科目
            $.ajax({
                url: "${pageContext.request.contextPath}/course/findAll",    //请求的url地址
                dataType: "json",   //返回格式为json
                async: true,//请求是否异步，默认为异步，这也是ajax重要特性
                type: "POST",   //请求方式
                success: function (result) {
                    var list = result.data;
                    for (var i = 0; i < list.length; i++) {
                        var courseId = list[i].id;
                        var courseName = list[i].name;
                        //给下拉框动态赋值
                        $("#courseId").append("<option value='" + courseId + "'>" + courseName + "</option>");
                    }
                }
            });

            setTimeout(function () {
                $("#bootstrap-table tbody tr").val(1);
                $("#bootstrap-table").on("click", "tbody tr", function () {
                    var $text = $(this).children('td').eq(0).text();
                    if ($(this).val() == 1) {
                        //选中触发事件
                        $('#selectedDiv').append('<button onclick="removeA(this)" class="label label-success">' + $text + '</button>')
                        var amount = $('input[name=amount]').val();
                        if ($('#selectedDiv').children('button').length > amount){
                            $.modal.alertError("已选超过题目数量！");
                            $('#bootstrap-table tbody').children('tr').addClass('layui-disabled');
                        }
                        $(this).val(0);
                    }
                    else if ($(this).val() == 0) {
                        //取消选中触发事件
                        $.each($('#selectedDiv').children('button'),function () {
                            if ($text == $(this).text()){
                                $(this).remove();
                            }
                        })
                        var amount = $('input[name=amount]').val();
                        if ($('#selectedDiv').children('button').length <= amount){
                            $('#bootstrap-table tbody').children('tr').removeClass('layui-disabled');
                        }
                        $(this).val(1);
                    }

                });
            }, 1000)
        });



        var data = "";
        var prefix = "${pageContext.request.contextPath}/question";
        $(function () {
            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/addQuestion",
                updateUrl: prefix + "/update/{id}",
                removeUrl: prefix,
                sortName: "",
                sortOrder: "desc",
                escape: true,
                modalName: "试题",
                rememberSelected: true,
                clickToSelect: true,
                columns: [{
                    field: 'state',
                    checkbox: true,
                    visible:false
                },
                    {
                        field: 'id',
                        title: '试题ID'
                    },
                    {
                        field: 'gradeName',
                        title: '年级'
                    },
                    {
                        field: 'courseName',
                        title: '课程',
                    },
                    {
                        field: 'chapterName',
                        title: '章节',
                    },
                    {
                        field: 'question',
                        title: '试题的标题'
                    },
                    {
                        field: 'typeId',
                        title: '试题类型',
                        formatter: function (value, item, index) {
                            if (item.typeId == '10000') {
                                return '<span class="label label-success">单选</span>';
                            } else if (item.typeId == '10001') {
                                return '<span class="label label-primary">多选</span>';
                            }
                        }
                    }]
            };
            $.table.init(options);
        });

        function submitHandler() {
            var $check = ($('input[name=name]').val() != ''
                            && $('input[name=score]').val() != ''
                            && $('input[name=duration]').val() != ''
                            && $('input[name=courseId]').val() != ''
                            && $('input[name=amount]').val() != '');
            if ($check) {
                var questionIds = [];
                $.each($('#selectedDiv').children('button'),function () {
                    questionIds.push($(this).text()*1);
                })
                questionIds = $.makeArray(questionIds);
                data = $("#form-exam-add").serialize();

                var amount = $('input[name=amount]').val();
                if ($('#selectedDiv').children('button').length != amount){
                    $.modal.alertError("题目数量不符！");
                }else {
                    $.operate.save("${pageContext.request.contextPath}/testPaper/addTestPaper?teacherId=${user.id}&questionIds="+questionIds+"", data);
                }
            }else {
                $.modal.alertError("内容不能为空！");
            }
        }

        function removeA(btn) {
            btn.remove();
            var amount = $('input[name=amount]').val();
            if ($('#selectedDiv').children('button').length <= amount){
                $('#bootstrap-table tbody').children('tr').removeClass('layui-disabled');
            }

        }
    </script>

</div>

<%@include file="../../common/include-footer.jsp" %>

<script src="/static/plugin/select/select2.js"></script>
<script type="text/javascript" src="/static/js/bootstrapValidator.min.js"></script>
<link rel="stylesheet" href="/static/css/bootstrapValidator.min.css" media="all"/>

</body>
<style>
    #selectedDiv button{
        margin: 10px;
    }
    #selectedDiv{
        height: 100px;
        word-wrap: break-word;
        word-break: break-all;
    }
</style>
</html>
